<template>
  <div class="Back" v-if="cropperShow">
      <div class="cropper-content flex">
        <!-- 标题 -->
        <div class="head flex">
            <div></div>
            <div>裁剪图片</div>
            <i class="el-icon-close" @click="showDown"></i>
        </div>
        <!-- 内容 -->
        <div class="cropper-box">
          <div class="cropper">
            <vue-cropper ref="cropper" 
               :img="croperImg" 
               :info="true"
               :autoCrop = "true"
               :outputSize="1" 
                outputType="jpeg"
               :full="true"
               :maxImgSize="6400"
               :canMove="false"
                @realTime="realTime"
            >
            </vue-cropper>
          </div>
        </div>
        <!--预览效果图-->
        <div class="show-preview">
            <div class="imageBox" :style="previewStyle">
                <img :src="previews.url" class="previewImage" :style="previews.img">
            </div>
        </div>

        <!-- 操作方法 -->
          <div class="fun flex">
              <el-button size="mini" type="primary" plain icon="el-icon-zoom-in" @click="changeScale(1)">放大</el-button>
              <el-button size="mini" type="primary" plain icon="el-icon-zoom-out" @click="changeScale(-1)">缩小</el-button>
              <el-button size="mini" type="primary" plain @click="rotateLeft">↺ 左旋转</el-button>
              <el-button size="mini" type="primary" plain @click="rotateRight">↻ 右旋转</el-button>
              <el-button size="mini" type="success" @click="uploadImg('blob')">上传图片 <i class="el-icon-upload"></i></el-button>
          </div>

      </div>
  </div>
</template>
<script>
import { VueCropper } from 'vue-cropper'
import { file } from '@/common/file';
export default {
  name: "CropperImage",
  components: {
    VueCropper
  },
  data () {
    return {
      previews: {},
      previewStyle:{}
    }
  },
  props: {
    cropperShow: {
      type: Boolean,
      default: false
    },
    croperImg: {
      type: String,
      default: ''
    },
    fileinfo: {
      default: null,
    },
    showDown:{
        default:() => {}
    },
    suceessUpload:{
         default:() => {}
    }
  },


  methods: {
    //初始化函数
    imgLoad (msg) {
    },
    //图片缩放
    changeScale (num) {
      num = num || 1
      this.$refs.cropper.changeScale(num)
    },
    //向左旋转
    rotateLeft () {
      this.$refs.cropper.rotateLeft()
    },
    //向右旋转
    rotateRight () {
      this.$refs.cropper.rotateRight()
    },
    //实时预览函数
    realTime (data) {
       this.previews = data
       var previews = data
       var h = 1
       var w = 1
       this.previewStyle = {
          width: previews.w + "px",
          height: previews.h + "px",
          overflow: "hidden",
          margin: "0",
          zoom: h
       }
    },
    

    //上传图片
    uploadImg (type) {
      let _this = this

    this.$refs.cropper.getCropBlob(async (data) => {
          let newfile = new File([data],_this.fileinfo?.name,{type:_this.fileinfo?.type})
          let res = await file.uploadImage('ArticleImage', newfile)
          if(res.code == 200)  {
             _this.suceessUpload(res.data)
          } else{
            _this.$message.error(res.message)
          }
        })
      
    }

  }
}
</script>
<style scoped lang="less">
.cropper-drag-box .cropper-move .cropper-modal{
  max-height: 90vh;

}
.cropper-content{
    width: 1000px;
    max-width: 90vw;
    max-height: 90vh;
    background: var(--BackColor);
    border-radius: 5px;
    padding: 20px;
    box-sizing: border-box;
    overflow: auto;

    .cropper-box , .show-preview{
         width: 50%;
         padding: 10px;
         box-sizing: border-box;
         overflow: hidden;
    }
    .head{
        width: 100%;
        height: 40px;
        justify-content: space-between;
        padding: 0 20px;
        box-sizing: border-box;
    }

    .cropper{
        width: 100%;
        height: 500px;
        margin-bottom: 10px;
    }
    
    // 预览图片
    .previewImage{
       width: 100%;
       object-fit: cover;
    }
    //方法
    .fun{
         padding: 0 20px;
         width: 100%;
         justify-content: flex-start;
         
    }
}
</style>
